@charset "UTF-8";
/*扩充的前端样式，参照网易NEC制定统一规范*/
::-webkit-scrollbar { width: 0; height: 7px; }
::-webkit-scrollbar-track { background-color: #FAFAFA; }
::-webkit-scrollbar-thumb { background-color: #F2F2F2; }
::-webkit-scrollbar-thumb:hover { background-color: #BFBFBF; }
::-webkit-scrollbar-thumb:active { background-color: #CCC; }
* { box-sizing: border-box; font-family: 微软雅黑, simsun; }
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover,a:active,a:focus{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

/*字号调整*/
.font-size12 { font-size: 12px !important; }
.font-size14 { font-size: 14px !important; }
.font-size16 { font-size: 16px !important; }
.font-size18 { font-size: 18px !important; }
.font-size20 { font-size: 20px !important; }
.font-size22 { font-size: 22px !important; }
.font-size24 { font-size: 24px !important; }
.font-size26 { font-size: 26px !important; }
.font-size28 { font-size: 28px !important; }
.font-size30 { font-size: 30px !important; }
.font-size32 { font-size: 32px !important; }
.font-size34 { font-size: 34px !important; }
.font-size36 { font-size: 36px !important; }
.font-size38 { font-size: 38px !important; }
.font-size40 { font-size: 40px !important; }
.font-size45 { font-size: 45px !important; }
.font-size50 { font-size: 50px !important; }
.font-size55 { font-size: 55px !important; }
.font-size60 { font-size: 60px !important; }
.font-size64 { font-size: 64px !important; }
.font-size72 { font-size: 72px !important; }
/*大写字母*/
.font-upp { text-transform: uppercase; }
.font-cap { text-transform: capitalize; }
.font-low { text-transform: lowercase; }
/*加粗调整*/
.font-weight500 { font-weight: 500; }
.font-weight600 { font-weight: 600; }
.font-weight700 { font-weight: 700; }
/*行间距*/
.line-height16 { line-height: 16px !important; }
.line-height18 { line-height: 18px !important; }
.line-height20 { line-height: 20px !important; }
.line-height24 { line-height: 24px !important; }
.line-height28 { line-height: 28px !important; }
.line-height30 { line-height: 30px !important; }
.line-height32 { line-height: 32px !important; }
.line-height34 { line-height: 34px !important; }
.line-height36 { line-height: 36px !important; }
.line-height40 { line-height: 40px !important; }
.line-height45 { line-height: 45px !important; }
.line-height50 { line-height: 50px !important; }
.line-height55 { line-height: 55px !important; }
.line-height60 { line-height: 60px !important; }
/*字体颜色*/
.font-black { color: #050505 !important; }
.font-gray { color: #989898 !important; }
.font-gray-strong { color: #666 !important; }
.font-gray-light { color: #b4b4b4 !important; }
.font-blue { color: #1c84c6 !important; }
.font-red { color: #ed5565 !important; }
.font-orange { color: #f8ac59 !important; }
.font-green { color: #1aad19 !important; }
.font-white { color: #fff !important; }
.font-main { color: #363941 !important; }
/*固定高度*/
.height-5 { height: 5px; }
.height-10 { height: 10px; }
.height-15 { height: 15px; }
.height-20 { height: 20px; }
.height-30 { height: 30px; }
.height-40 { height: 40px; }
.height-50 { height: 50px; }
.height-60 { height: 60px; }

/*文本对齐片段*/
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; white-space: normal; word-break: break-all; }
/*浮动*/
.pull-left { float: left; }
.pull-right { float: right; }
.clearfix:after { display: block; content: ''; height: 0; overflow: hidden; clear: both; }
.block { display: block; }
.inline-block { display: inline-block; }

/*边距*/
.m-d { margin: 10px; }
.m-d-15 { margin: 15px; }
.m-d-20 { margin: 20px; }
.m-d-30 { margin: 30px; }
.p-d-5 { padding: 5px; }
.p-d { padding: 10px; }
.p-d-15 { padding: 15px; }
.p-d-20 { padding: 20px; }
.p-d-30 { padding: 30px; }
.m-lr-clear { margin-right: 0; margin-left: 0; }
.m-tb-clear { margin-top: 0; margin-bottom: 0; }
.p-lr-clear { padding-right: 0; padding-left: 0; }
.p-tb-clear { padding-top: 0; padding-bottom: 0; }

.m-l-5 { margin-left: 5px; }
.m-l-10 { margin-left: 10px; }
.m-l-15 { margin-left: 15px; }
.m-r-5 { margin-right: 5px; }
.m-r-10 { margin-right: 10px; }
.m-r-15 { margin-right: 15px; }
/*等分网格*/
[class*="mc-avg-"] { display: block; padding: 0; margin: 0; list-style: none; }
[class*="mc-avg-"]:before, [class*="mc-avg-"]:after { content: " "; display: table; }
[class*="mc-avg-"]:after { clear: both; }
[class*="mc-avg-"] > li { display: block; height: auto; float: left; }
@media only screen { .mc-avg-sm-1 > li { width: 100%; }
    .mc-avg-sm-1 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-1 > li:nth-of-type(1n + 1) { clear: both; }
    .mc-avg-sm-2 > li { width: 50%; }
    .mc-avg-sm-2 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-2 > li:nth-of-type(2n + 1) { clear: both; }
    .mc-avg-sm-3 > li { width: 33.33333333%; }
    .mc-avg-sm-3 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-3 > li:nth-of-type(3n + 1) { clear: both; }
    .mc-avg-sm-4 > li { width: 25%; }
    .mc-avg-sm-4 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-4 > li:nth-of-type(4n + 1) { clear: both; }
    .mc-avg-sm-5 > li { width: 20%; }
    .mc-avg-sm-5 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-5 > li:nth-of-type(5n + 1) { clear: both; }
    .mc-avg-sm-6 > li { width: 16.66666667%; }
    .mc-avg-sm-6 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-6 > li:nth-of-type(6n + 1) { clear: both; }
    .mc-avg-sm-7 > li { width: 14.28571429%; }
    .mc-avg-sm-7 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-7 > li:nth-of-type(7n + 1) { clear: both; }
    .mc-avg-sm-8 > li { width: 12.5%; }
    .mc-avg-sm-8 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-8 > li:nth-of-type(8n + 1) { clear: both; }
    .mc-avg-sm-9 > li { width: 11.11111111%; }
    .mc-avg-sm-9 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-9 > li:nth-of-type(9n + 1) { clear: both; }
    .mc-avg-sm-10 > li { width: 10%; }
    .mc-avg-sm-10 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-10 > li:nth-of-type(10n + 1) { clear: both; }
    .mc-avg-sm-11 > li { width: 9.09090909%; }
    .mc-avg-sm-11 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-11 > li:nth-of-type(11n + 1) { clear: both; }
    .mc-avg-sm-12 > li { width: 8.33333333%; }
    .mc-avg-sm-12 > li:nth-of-type(n) { clear: none; }
    .mc-avg-sm-12 > li:nth-of-type(12n + 1) { clear: both; } }
@media only screen and (min-width: 641px) { .mc-avg-md-1 > li { width: 100%; }
    .mc-avg-md-1 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-1 > li:nth-of-type(1n + 1) { clear: both; }
    .mc-avg-md-2 > li { width: 50%; }
    .mc-avg-md-2 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-2 > li:nth-of-type(2n + 1) { clear: both; }
    .mc-avg-md-3 > li { width: 33.33333333%; }
    .mc-avg-md-3 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-3 > li:nth-of-type(3n + 1) { clear: both; }
    .mc-avg-md-4 > li { width: 25%; }
    .mc-avg-md-4 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-4 > li:nth-of-type(4n + 1) { clear: both; }
    .mc-avg-md-5 > li { width: 20%; }
    .mc-avg-md-5 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-5 > li:nth-of-type(5n + 1) { clear: both; }
    .mc-avg-md-6 > li { width: 16.66666667%; }
    .mc-avg-md-6 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-6 > li:nth-of-type(6n + 1) { clear: both; }
    .mc-avg-md-7 > li { width: 14.28571429%; }
    .mc-avg-md-7 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-7 > li:nth-of-type(7n + 1) { clear: both; }
    .mc-avg-md-8 > li { width: 12.5%; }
    .mc-avg-md-8 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-8 > li:nth-of-type(8n + 1) { clear: both; }
    .mc-avg-md-9 > li { width: 11.11111111%; }
    .mc-avg-md-9 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-9 > li:nth-of-type(9n + 1) { clear: both; }
    .mc-avg-md-10 > li { width: 10%; }
    .mc-avg-md-10 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-10 > li:nth-of-type(10n + 1) { clear: both; }
    .mc-avg-md-11 > li { width: 9.09090909%; }
    .mc-avg-md-11 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-11 > li:nth-of-type(11n + 1) { clear: both; }
    .mc-avg-md-12 > li { width: 8.33333333%; }
    .mc-avg-md-12 > li:nth-of-type(n) { clear: none; }
    .mc-avg-md-12 > li:nth-of-type(12n + 1) { clear: both; } }
@media only screen and (min-width: 1025px) { .mc-avg-lg-1 > li { width: 100%; }
    .mc-avg-lg-1 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-1 > li:nth-of-type(1n + 1) { clear: both; }
    .mc-avg-lg-2 > li { width: 50%; }
    .mc-avg-lg-2 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-2 > li:nth-of-type(2n + 1) { clear: both; }
    .mc-avg-lg-3 > li { width: 33.33333333%; }
    .mc-avg-lg-3 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-3 > li:nth-of-type(3n + 1) { clear: both; }
    .mc-avg-lg-4 > li { width: 25%; }
    .mc-avg-lg-4 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-4 > li:nth-of-type(4n + 1) { clear: both; }
    .mc-avg-lg-5 > li { width: 20%; }
    .mc-avg-lg-5 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-5 > li:nth-of-type(5n + 1) { clear: both; }
    .mc-avg-lg-6 > li { width: 16.66666667%; }
    .mc-avg-lg-6 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-6 > li:nth-of-type(6n + 1) { clear: both; }
    .mc-avg-lg-7 > li { width: 14.28571429%; }
    .mc-avg-lg-7 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-7 > li:nth-of-type(7n + 1) { clear: both; }
    .mc-avg-lg-8 > li { width: 12.5%; }
    .mc-avg-lg-8 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-8 > li:nth-of-type(8n + 1) { clear: both; }
    .mc-avg-lg-9 > li { width: 11.11111111%; }
    .mc-avg-lg-9 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-9 > li:nth-of-type(9n + 1) { clear: both; }
    .mc-avg-lg-10 > li { width: 10%; }
    .mc-avg-lg-10 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-10 > li:nth-of-type(10n + 1) { clear: both; }
    .mc-avg-lg-11 > li { width: 9.09090909%; }
    .mc-avg-lg-11 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-11 > li:nth-of-type(11n + 1) { clear: both; }
    .mc-avg-lg-12 > li { width: 8.33333333%; }
    .mc-avg-lg-12 > li:nth-of-type(n) { clear: none; }
    .mc-avg-lg-12 > li:nth-of-type(12n + 1) { clear: both; } }
/*等分网格间距 sm4px 默认10px lg20px*/
.mc-avg-between-sm { margin-left: -2px; margin-right: -2px; }
.mc-avg-between-sm > li { padding: 0 2px 2px 2px; }
.mc-avg-between { margin-left: -5px; margin-right: -5px; }
.mc-avg-between > li { padding: 0 5px 5px 5px; }
.mc-avg-between-lg { margin-left: -10px; margin-right: -10px; }
.mc-avg-between-lg > li { padding: 0 10px 10px 10px; }
/*其他*/
.mc-img-responsive { display: block; max-width: 100%; height: auto; }
.block-link { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; }
.del-line { text-decoration: line-through; }
/*去掉圆角*/
.no-radius { border-radius: 0 !important; }
.mc-radius-2 { border-radius: 2px; }
.mc-radius-5 { border-radius: 5px; }
.mc-radius-8 { border-radius: 8px; }
.mc-radius-10 { border-radius: 10px; }
.mc-radius-15 { border-radius: 15px; }
.mc-radius-20 { border-radius: 20px; }
.mc-radius-25 { border-radius: 25px; }
.mc-circle { border-radius: 50%; }

/*固定正方形图像，配合mc-circle实现圆形*/
.mc-thumb-square { width: 60px; height: 60px; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.mc-thumb-square.bordered { border: 1px solid #e8e8e8; }
.mc-thumb-square.thumb-70 { width: 70px; height: 70px; }
.mc-thumb-square.thumb-90 { width: 90px; height: 90px; }
.mc-thumb-square.thumb-40 { width: 40px; height: 40px; }
.mc-thumb-square.thumb-30 { width: 30px; height: 30px; }
.mc-thumb-square.thumb-20 { width: 20px; height: 20px; }

/*实线*/
.split-line-solid { width: 100%; height: 10px; border-top: 1px solid #e8e8e8; margin-top: 10px; }
/*虚线*/
.split-line-dashed { width: 100%; height: 10px; border-top: 1px dashed #e8e8e8; margin-top: 10px; }
.split-line-sm { height: 5px; margin-top: 5px; }
.split-line-lg { height: 20px; margin-top: 20px; }

/*单行截断*/
.one-cut, .single-cut { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*多行截断*/
.two-cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; overflow: hidden; }
.three-cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 !important; overflow: hidden; }
.four-cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4 !important; overflow: hidden; }
.five-cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5 !important; overflow: hidden; }
/*翻转*/
/*水平翻转*/
.flipx { display: inline-block; -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); /*IE*/ filter: FlipH; }
/*垂直翻转*/
.flipy { display: inline-block; -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); /*IE*/ filter: FlipV; }

/*阴影*/
.mc-ying { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
.mc-ying-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
/*不显示*/
.hidden, .hide { display: none; }

/* 复选框 & 单选框 */
.checkbox,
.radio {
    display: block;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;
    padding-left: 30px;
    font-weight: 400;
    min-height: 18px;
    height: auto!important;
    line-height: 18px!important;
}
input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}
.checkbox input,
.radio input {
    position: absolute;;
    /*opacity: 0;*/
    display: none;
}
.checkbox span::before,
.radio span::before {
    content: '';
    position: absolute;
    display: inline-block;
    height: 18px;
    width: 18px;
    left: 0;
    top: 0;
    border: 2px solid #ebebeb;;
    -webkit-transition: all .1s;
    -o-transition: all .1s;
    transition: all .1s;
}
.checkbox span::after,
.radio span::after {
    content: '';
    position: absolute;
    display: none;
    width: 5px;
    height: 10px;
    left: 7px;
    top: 3px;
    border: solid #4d5259;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.checkbox span,
.radio span {
    display: inline-block;
}
.checkbox input:checked~span:after,
.radio input:checked~span:after {
    display: inline-block;
}
.checkbox:hover span::before,
.radio:hover span::before {
    border-color: #ebebeb;
}
.checkbox.checkbox-grey span::before,
.checkbox.radio-grey span::before,
.radio.checkbox-grey span::before,
.radio.radio-grey span::before {
    background-color: #ebebeb;
    border-color: #ebebeb;
}
.checkbox input:disabled + span,
.radio input:disabled + span {
    cursor: not-allowed;
}
.checkbox input:disabled + span::before,
.checkbox input:disabled + span::after,
.radio input:disabled + span::before,
.radio input:disabled + span::after {
    opacity: .4;
}
/* checkbox */
.checkbox-primary input:checked~span::before {
    background-color: #33cabb;
    border-color: #33cabb;
}
.checkbox-primary input:checked~span::after {
    border-color: #fff;
}
.checkbox-success input:checked~span::before {
    background-color: #15c377;
    border-color: #15c377;
}
.checkbox-success input:checked~span::after {
    border-color: #fff;
}
.checkbox-info input:checked~span::before {
    background-color: #48b0f7;
    border-color: #48b0f7;
}
.checkbox-info input:checked~span::after {
    border-color: #fff;
}
.checkbox-warning input:checked~span::before {
    background-color: #faa64b;
    border-color: #faa64b;
}
.checkbox-warning input:checked~span::after {
    border-color: #fff;
}
.checkbox-danger input:checked~span::before {
    background-color: #f96868;
    border-color: #f96868;
}
.checkbox-danger input:checked~span::after {
    border-color: #fff;
}
.checkbox-dark input:checked~span::before {
    background-color: #465161;
    border-color: #465161;
}
.checkbox-dark input:checked~span::after {
    border-color: #fff;
}
.checkbox-secondary input:checked~span::before {
    background-color: #e4e7ea;
    border-color: #e4e7ea;
}
.checkbox-secondary input:checked~span::after {
    border-color: #fff;
}
.checkbox-purple input:checked~span::before {
    background-color: #926dde;
    border-color: #926dde;
}
.checkbox-purple input:checked~span::after {
    border-color: #fff;
}
.checkbox-pink input:checked~span::before {
    background-color: #f96197;
    border-color: #f96197;
}
.checkbox-pink input:checked~span::after {
    border-color: #fff;
}
.checkbox-cyan input:checked~span::before {
    background-color: #57c7d4;
    border-color: #57c7d4;
}
.checkbox-cyan input:checked~span::after {
    border-color: #fff;
}
.checkbox-yellow input:checked~span::before {
    background-color: #fcc525;
    border-color: #fcc525;
}
.checkbox-yellow input:checked~span::after {
    border-color: #fff;
}
.checkbox-brown input:checked~span::before {
    background-color: #8d6658;
    border-color: #8d6658;
}
.checkbox-brown input:checked~span::after {
    border-color: #fff;
}
/* radio */
.radio span::before {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.radio span::after {
    border: 0;
    height: 6px;
    left: 6px;
    top: 6px;
    width: 6px;
    background: #4d5259;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}
.radio-primary input:checked~span::before {
    background-color: #33cabb;
    border-color: #33cabb;
}
.radio-primary input:checked~span::after {
    background-color: #fff;
}
.radio-success input:checked~span::before {
    background-color: #15c377;
    border-color: #15c377;
}
.radio-success input:checked~span::after {
    background-color: #fff;
}
.radio-info input:checked~span::before {
    background-color: #48b0f7;
    border-color: #48b0f7;
}
.radio-info input:checked~span::after {
    background-color: #fff;
}
.radio-warning input:checked~span::before {
    background-color: #faa64b;
    border-color: #faa64b;
}
.radio-warning input:checked~span::after {
    background-color: #fff;
}
.radio-danger input:checked~span::before {
    background-color: #f96868;
    border-color: #f96868;
}
.radio-danger input:checked~span::after {
    background-color: #fff;
}
.radio-dark input:checked~span::before {
    background-color: #465161;
    border-color: #465161;
}
.radio-dark input:checked~span::after {
    background-color: #fff;
}
.radio-secondary input:checked~span::before {
    background-color: #e4e7ea;
    border-color: #e4e7ea;
}
.radio-secondary input:checked~span::after {
    background-color: #fff;
}
.radio-purple input:checked~span::before {
    background-color: #926dde;
    border-color: #926dde;
}
.radio-purple input:checked~span::after {
    background-color: #fff;
}
.radio-pink input:checked~span::before {
    background-color: #f96197;
    border-color: #f96197;
}
.radio-pink input:checked~span::after {
    background-color: #fff;
}
.radio-cyan input:checked~span::before {
    background-color: #57c7d4;
    border-color: #57c7d4;
}
.radio-cyan input:checked~span::after {
    background-color: #fff;
}
.radio-yellow input:checked~span::before {
    background-color: #fcc525;
    border-color: #fcc525;
}
.radio-yellow input:checked~span::after {
    background-color: #fff;
}
.radio-brown input:checked~span::before {
    background-color: #8d6658;
    border-color: #8d6658;
}
.radio-brown input:checked~span::after {
    background-color: #fff;
}

.checkbox-inline, .radio-inline {
    display: inline-block;
}
.form-horizontal .radio.radio-inline,
.form-horizontal .checkbox.checkbox-inline {
    padding-top: 0;
    margin-top: 8px;
}

/* 开关 */
.switch {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
}
.switch input {
    height: 0;
    width: 0;
    position: absolute;
    opacity: 0;
}
.switch span {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #ebebeb;
    border: 2px solid #ebebeb;
    cursor: pointer;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease
}
.switch span:after {
    content: '';
    height: 20px;
    width: 20px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    left: 1px;
    top: -7px;
    color: #aaa;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
    text-align: center;
    font-size: 13px;
    background-color: #fff;
    -webkit-box-shadow: rgba(0,0,0,.12) 0 1px 6px,rgba(0,0,0,.12) 0 1px 4px;
    box-shadow: rgba(0,0,0,.12) 0 1px 6px,rgba(0,0,0,.12) 0 1px 4px
}
.switch input:checked~span:after {
    left: -webkit-calc(100% - 20px);
    left: calc(100% - 20px);
}
.switch-primary input:checked~span:after {
    background-color: #33cabb
}
.switch-success input:checked~span:after {
    background-color: #15c377
}
.switch-info input:checked~span:after {
    background-color: #48b0f7
}
.switch-warning input:checked~span:after {
    background-color: #faa64b
}
.switch-danger input:checked~span:after {
    background-color: #f96868
}
.switch-secondary input:checked~span:after {
    background-color: #868e96
}
.switch-dark input:checked~span:after {
    background-color: #465161
}
.switch-purple input:checked~span:after {
    background-color: #926dde
}
.switch-pink input:checked~span:after {
    background-color: #f96197
}
.switch-cyan input:checked~span:after {
    background-color: #57c7d4
}
.switch-yellow input:checked~span:after {
    background-color: #fcc525
}
.switch-brown input:checked~span:after {
    background-color: #8d6658
}

.switch.switch-solid span,
.switch.switch-light span,
.switch.switch-outline span {
    height: 20px;
}
.switch.switch-solid span:after,
.switch.switch-light span:after,
.switch.switch-outline span:after {
    top: -2px;
}
.switch.switch-outline span {
    background-color: #fff
}
.switch-solid.switch-primary input:checked~span {
    background-color: #33cabb;
    border-color: #33cabb
}
.switch-solid.switch-primary input:checked~span:after {
    background-color: #fff;
    color: #33cabb
}
.switch-solid.switch-success input:checked~span {
    background-color: #15c377;
    border-color: #15c377
}
.switch-solid.switch-success input:checked~span:after {
    background-color: #fff;
    color: #15c377
}
.switch-solid.switch-info input:checked~span {
    background-color: #48b0f7;
    border-color: #48b0f7
}
.switch-solid.switch-info input:checked~span:after {
    background-color: #fff;
    color: #48b0f7
}
.switch-solid.switch-warning input:checked~span {
    background-color: #faa64b;
    border-color: #faa64b
}
.switch-solid.switch-warning input:checked~span:after {
    background-color: #fff;
    color: #faa64b
}
.switch-solid.switch-danger input:checked~span {
    background-color: #f96868;
    border-color: #f96868
}
.switch-solid.switch-danger input:checked~span:after {
    background-color: #fff;
    color: #f96868
}
.switch-solid.switch-secondary input:checked~span {
    background-color: #868e96;
    border-color: #868e96
}
.switch-solid.switch-secondary input:checked~span:after {
    background-color: #fff;
    color: #868e96
}
.switch-solid.switch-dark input:checked~span {
    background-color: #465161;
    border-color: #465161
}
.switch-solid.switch-dark input:checked~span:after {
    background-color: #fff;
    color: #465161
}
.switch-solid.switch-purple input:checked~span {
    background-color: #926dde;
    border-color: #926dde
}
.switch-solid.switch-purple input:checked~span:after {
    background-color: #fff;
    color: #926dde
}
.switch-solid.switch-pink input:checked~span {
    background-color: #f96197;
    border-color: #f96197
}
.switch-solid.switch-pink input:checked~span:after {
    background-color: #fff;
    color: #f96197
}
.switch-solid.switch-cyan input:checked~span {
    background-color: #57c7d4;
    border-color: #57c7d4
}
.switch-solid.switch-cyan input:checked~span:after {
    background-color: #fff;
    color: #57c7d4
}
.switch-solid.switch-yellow input:checked~span {
    background-color: #fcc525;
    border-color: #fcc525
}
.switch-solid.switch-yellow input:checked~span:after {
    background-color: #fff;
    color: #fcc525
}
.switch-solid.switch-brown input:checked~span {
    background-color: #8d6658;
    border-color: #8d6658
}
.switch-solid.switch-brown input:checked~span:after {
    background-color: #fff;
    color: #8d6658
}


